<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Plot</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="system/styles/igrX.css" />
    <!--[if lte IE 7]>
    <link rel="stylesheet" media="screen, print" href="system/styles/plot.compat.css" />
    <![endif]-->
	<style type="text/css">

	.axisTarget {
		display:none
	}

    </style>
</head>
<body scroll="no" class="no-scroll">
    <div class='trend' id='placeholder' style='top:0;left:0;'></div>
</body>
<script type="text/javascript" src="system/scripts/igrX.js"></script>
<script type="text/javascript">

var totalNumofBoolean = 6; 															// Specif total number of boolean tag in the whole page
var boolMin= function(min,seq){return (min-0.25-((totalNumofBoolean-seq)*1.5));};	// function to calculate min of pen (for posisitonting purpose)
var boolMax= function(max,seq){return (max+0.25+((seq-1)*1.5));};					// function to calculate max of pen (for posisitonting purpose)

var pen = [
	{
        name: 'TAG A',
        enabled: true,
        unit: 'boolean',
        min: boolMin(0, 1), 			// first argument = min value of the tag, second argument = Sequence of the tag
        max: boolMax(1, 1), 			// first argument = max value of the tag, second argument = Sequence of the tag
        pens: [
            {
                name: 'TAG A',
                tag: 'bool_a',
                format: 'up/down'		// When tag is TRUE, display "up"; when tag is FALSE, display "down"
            }
        ]
    },
	{
        name: 'TAG B',
        enabled: true,
        unit: 'boolean',
        min: boolMin(0, 2),				// first argument = min value of the tag, second argument = Sequence of the tag
        max: boolMax(1, 2),				// first argument = max value of the tag, second argument = Sequence of the tag
        pens: [
            {
                name: 'TAG B',
                tag: 'bool_b',
                format: 'good/bad'		// When tag is TRUE, display "good"; when tag is FALSE, display "bad"
            }
        ]
    },
	{
        name: 'TAG C',
        enabled: true,
        unit: 'boolean',
        min:boolMin(0, 3),				// first argument = min value of the tag, second argument = Sequence of the tag
        max:boolMax(1, 3),				// first argument = max value of the tag, second argument = Sequence of the tag
        pens: [
            {
                name: 'TAG C',
                tag: 'bool_c',
				format: 'TRUE/FALSE'	// When tag is TRUE, display "TRUE"; when tag is FALSE, display "FALSE"
            }
        ]
    },
	{
        name: 'TAG D',
        enabled: true,
        unit: 'boolean',
        min: boolMin(0, 4),				// first argument = min value of the tag, second argument = Sequence of the tag
        max: boolMax(1, 4),             // first argument = max value of the tag, second argument = Sequence of the tag
        pens: [
            {
                name: 'TAG D',
                tag: 'bool_d',
                format: '###'			// When tag is TRUE, display "true" (default); when tag is FALSE, display "false" (default)
            }
        ]
    },
	{
        name: 'TAG E',
        enabled: true,
        unit: 'boolean',
        min: boolMin(0, 5),				// first argument = min value of the tag, second argument = Sequence of the tag
        max: boolMax(1, 5),             // first argument = max value of the tag, second argument = Sequence of the tag
        pens: [
            {
                name: 'TAG E',
                tag: 'bool_e'
            }
        ]
    },
	{
        name: 'TAG F',
        enabled: true,
        unit: 'boolean',
        min: boolMin(0, 6),				// first argument = min value of the tag, second argument = Sequence of the tag
        max: boolMax(1, 6),             // first argument = max value of the tag, second argument = Sequence of the tag
        pens: [
            {
                name: 'TAG F',
                tag: 'bool_f',
                format: 'Run/Stop'		// When tag is TRUE, display "Run"; when tag is FALSE, display "Stop"
            }
        ]
    }
];
var opt = {
    'gridx': 10,
    'skip': true,
    'lograte': 5000,
    'title': 'Step Trending',
    'backgroundColor': 'white',
    'refLineColor': 'black',
    'lineWidth': 2
};

var plot = igrx.trend( '#placeholder', {
    'pen_setting': pen,
    'option': opt
});

</script>
</html>